<template>
    <!--<router-view/>-->
    <div class="container-fluid" :class="{'bg-dark':$store.getters.getHeardState}">
        <div class="container-self">
            <div class="row row-cols-3 justify-content-between" style="height: 100%;">
                <div class="col-sm-3 align-self-center" style="max-width: 400px">
                    <!--嵌套-->
                    <div class="row">
                        <div class="col-5 align-self-center" style="min-width: 160px"><img style="width: 126px;height: 38px;" src="../assets/images/youkulogo.svg"></div>
                        <div class="col px-0 align-self-center text-light">
                            <ul class="list-inline" style="text-align: left">
                                <li class="list-inline-item d-none d-xl-inline-block"><a href="#">剧集</a></li>
                                <li class="list-inline-item d-none d-xl-inline-block"><a href="#">电影</a></li>
                                <li class="list-inline-item d-none d-xl-inline-block"><a href="#">综艺</a></li>
                                <li class="list-inline-item d-none d-xl-inline-block"><i class="iconfont icon-vertical_line"></i></li>
                                <li class="list-inline-item" id="dropdownMenuOffset" data-toggle="dropdown" data-offset="-100,20"><a href="#">导航</a><i class="iconfont icon-xiala2"></i></li>
                                <!--下拉菜单-->
                                <div class="dropdown-menu .bg-secondary" aria-labelledby="dropdownMenuOffset" style="width: 700px;height: 100px;">
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 align-self-center">
                    <search></search>
                </div>
                <div class="col-xl-4 align-self-center" style="min-width: 300px;max-width: 400px">
                    <uer-center></uer-center>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import search from '../components/heard/search.vue';
    import uerCenter from '../components/heard/uerCenter.vue';
    export default {
        name: 'HearNav',
        data(){
            return{
            }
        },
        props: {msg: String},
        methods:{

        },
        mounted() {
        },
        components:{
            search,
            uerCenter
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .container-fluid{
        height: 70px;
        .container-self{
            height: 100%;
            margin-right: auto;
            margin-left: auto;
        }
        .align-self-center{
            z-index: 10;
        }
        .list-inline {

            a {
                color: #f8f9fa;

                &:hover {
                    color: #3399e0;
                }
            }

            li:last-child {
                i {
                    font-weight: bold;
                    font-size: 18px;
                    vertical-align: bottom;
                }
            }
        }
    }
</style>

<style>
    @import "../assets/style/responsive.scss";
</style>